<!-- 不需要功能页面-->
<template>
    <div class="page" data-page="inspectionApply" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">监控查岗</div>
        </div>
        <div class="page-content  infinite-scroll-content">
            <div class="list mtop">
                <ul>
                <li>
                            <div class="item-content" style="padding-left: 0;">
                                <div class="item-inner right_DW" style="padding: initial;">
                                    <div class="item-title left_wd">任务名称</div>
                                    <div class="item-subtitle unitcust" id="getWorkName" style="    right: 30px;"></div>
                                </div>
                            </div>
                    </li>
                    <li>
                            <div class="item-content" style="padding-left: 0;">
                                <div class="item-inner right_DW" style="padding: initial;">
                                    <div class="item-title left_wd">查岗单位</div>
                                    <div class="item-subtitle unitcust" id="getUintValue">请选择联网单位</div>
                                </div>
                            </div>
                    </li><!--查岗单位-->
                   <!--  <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title left_wd">人员列表</div>
                            </div>
                        </div>
                    </li> --><!--人员列表-->
                </ul>
                <div class="divide-gray mt98" style="margin-top: 0px;"></div>
                <div class="item-content" style="padding-left: 0;" id="persomLine">
                            <div class="item-inner">
                                <div class="item-title left_wd  addInfo" >人员列表</div>
                            </div>
                        </div>
                <ul id="monitorPersonOnDuty">
                
                </ul>
                <div class="divide-gray mt98" style="margin-top: 0px;"></div>
                 <div class="item-content" style="padding-left: 0;">
                            <div class="item-inner">
                                <div class="item-title left_wd addInfo" >视频列表</div>
                            </div>
                        </div>
                <ul id="monitorVedio">

                </ul>
            </div>
        </div>
    </div>
</template>
<style scoped>
.addInfo{
border-left: 2px solid #378bf6;
padding-left: 10px;
}

 #monitorPersonOnDuty:before {
        height: 0px;
    }
#monitorVedio:before {
        height: 0px;
    }
    .left_wd {
        left: 16px;
    }

    .mtop {
        margin: 0px;
    }

    .right_DW {
        position: relative;
    }

    .unitTK .item-after {
        position: absolute;
        right: 15px;
    }

    .unitcust {
        width: 68%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: right;
        right: 15px;
        color: #757575;
        font-size: 14px;
        padding-left: 8px;
    }
    .list ul:after{
        height: 0px!important;
    }
</style>

<script>
    return {

        data: function () {
            return {
                currentOrgId: ''
            }
        },
        mounted() {
            var self = this;
            self.getUnitzhagang();//查岗单位

        },
        // Component Methods
        methods: {
            //查岗单位
            getUnitzhagang: function () {
                var self = this;
                var app = self.$app;
                if (userInfor.isMuilUnitUser  == 0) {
                    //单联网单位
                    self.currentOrgId = userInfor.organizationIds;
                    $("#getUintValue").html(userInfor.org.name);
                    
                    self.getPersonOnDuty();//值班人员
                    self.getVideoInfo();//值班室视频
                    self.getToday_zhagangName();
                } else {
                    //多联网单位
                    $("#getUintValue").show().click(function (event) {
                        loadSelectUnitFunc(function (data) {
                            self.currentOrgId = data.orgId;
                            $("#getUintValue").html(data.orgName);
                            self.getPersonOnDuty();//值班人员
                            self.getVideoInfo();//值班室视频
                            self.getToday_zhagangName();
                        });
                    });
                }

            },
            getPersonOnDuty: function () {
                var self = this;
                var $ = self.$;
                $("#monitorPersonOnDuty").empty();
                Dao.getCurrentPersonnelOnDuty({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    organizationId: self.currentOrgId,
                }, function (data) {
                    var personData = data;
                    if (personData.length > 0) {
                        for (var i = 0; i < personData.length; i++) {
                            var imageurl = '';
                            var flag = '';
                            var coltext = '';
                            if (personData[i].headUrl != '') {
                                imageurl = personData[i].headUrl;
                            } else {
                                imageurl = staticPath + 'img/mine/defaulticon.png';
                            }
                            if (personData[i].uplandFlag.toString() == 0) {
                                flag = "离岗";
                                coltext = '#a7a7a7';
                            } else {
                                flag = "在岗";
                                coltext = '#5fe278';
                            }
                            $("#monitorPersonOnDuty").append(
                                `<li>
                                    <label class="item-content">
                                        <div class="item-media"><img src=` + imageurl + ` style="width:44px;height:44px;border-radius:22px;margin-left:13px;"></div>
                                        <div class="item-inner">
                                            <div class="">
                                                <div class="item-title">` + common.transNullundefined(personData[i].watchAccountName) + `</div>
                                                <div class="item-subtitle">电话 ` + common.transNullundefined(personData[i].mobile) + `</div>
                                            </div>
                                            <div class="item-subtitle" style="background-color: ` + coltext + `;width: 47px;height: 21px;    text-align: center;border-radius:1px;color:#FFFFFF">` + flag + `</div>
                                        </div>
                                    </label>
                                </li>`
                            )
                        }
                    }
                });
            },
            getVideoInfo: function () {
                var self = this;
                var $ = self.$$;
                $("#monitorVedio").empty();
                videoData = [];
                Dao.getVideo({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgIds: self.currentOrgId,
                }, function (data) {
                    for (var j = 0; j < data.length; j++) {
                        var vedioObj = data[j].video;
                        videoData[data[j].video.id] = data[j].video;
                        var status = staticPath + "img/vedio/offline.png";
                        if (vedioObj.isOnline == 1) {
                            status = staticPath + "img/vedio/play.png"
                        }
                        // var DFVideoIcon = staticPath + "img/vedio/defaultVideo.png";
                        // if (vedioObj.picUrl && vedioObj.picUrl != "") {
                        //     DFVideoIcon = vedioObj.picUrl;
                        // }
                        var DFVideoIcon = picVedioNo(vedioObj.picUrl);
                        $("#monitorVedio").append('<li> <a data-view=".view-main" href="#' + vedioObj.id + '/" >' +
                            '<td style="position: relative;">' +
                            '<img src="' + DFVideoIcon + '" style="position: absolute; z-index: 1; width: 90%; height: 186px; margin-left: 5%; margin-top: 19px">' +
                            '<img src="' + status + '" style="position: absolute; top: 70px;margin-left: 43%; z-index: 2;height:70px;"></td>' +
                            '<div style="padding-top: 220px; padding-left: 5%; color: #333;">' + vedioObj.name + '</div></a></li>');
                        jQuery("#monitorVedio").off("click").on("click",{'data':vedioObj.id},function(e) {
                            var id = e.data.data;
                            var bean = videoData[id];
                            var videoBean  = {};
                            videoBean.id = bean.id;
                            videoBean.deviceId = bean.deviceId;
                            videoBean.type = bean.type;
                            videoBean.name = bean.name;
                            videoBean.channel = bean.channel;
                            videoBean.status = bean.status;
                            videoBean.picUrl = bean.picUrl;
                            videoBean.isOnline = bean.isOnline;
                            videoBean.isConcem = bean.isConcem==null?0:bean.isConcem;
                            Dao.getAuthList({
                               userName:userInfor.accountName,
                               deviceId:appKeyObj.deviceId,
                               organizationId:self.currentOrgId,
                               equiptType:bean.type,
                               orgCode:userInfor.org.orgCode,
                               authId: bean.authId
                            },function(data) {
                                var videoKeyBean = data[0];
                                // native.videoCollection(JSON.stringify(videoBean));
                                native.openVideo(JSON.stringify(videoKeyBean),JSON.stringify(videoBean));
                            },function(e) {

                            },true);
                        });

                    }
                })
            },
          //查岗名称
            getToday_zhagangName: function () {
                var self = this;
                var $ = self.$;
                var date = new Date();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                self.currentdate = month+"-" + strDate + '监控查岗';
                $("#getWorkName").html(self.currentdate);
            },
        }
    }
</script>